<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class="top">
				<view class="user tn-flex">
					<view class="user-left tn-flex">
						<image :src="user.avatar" mode=""></image>
						<text class="t1">{{user.nickname}}</text>
					</view>
					<text class="user-right" @click="sendmsg">联系TA</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>项目分类</text>
					<text>{{user.game_name}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>购买数量</text>
					<text>x{{user.num}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between">
					<text>单价</text>
					<text>{{user.price}}海豚币/{{user.unit}}</text>
				</view>
				<view class="tag-list tn-flex tn-flex-row-between" v-if="user.remark">
					<text>备注说明</text>
					<text>{{user.remark}}</text>
				</view>
				<view class="price tn-flex tn-flex-row-right tn-flex-col-center">
					<text class="p1">实付：</text>
					<view class="p2">
						<text class="num">{{user.total_amount}}</text>
						<text class="unit">海豚币</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="list">
					<text class="t1">订单编号：{{user.order_sn}}</text>
					<text class="copy-btn" @click="copy">复制</text>
				</view>
				<view class="list">
					<text class="t1">下单时间：{{user.create_time}}</text>
				</view>
			</view>
			<view class="foot tn-flex" v-if="user.status === 1 || user.status === 4||user.status === 5">
				<view class="btn1" v-if="user.status === 1" @click="cancelOrder">取消订单</view>
				<view class="btn2" v-if="user.status === 1" @click="pay">支付</view>
				<view class="btn2" v-if="user.status === 4" @click="success">订单完成</view>
				<view class="btn2" v-if="user.status === 5" @click="goEvaluate">去评价</view>
				<view class="btn2" v-if="user.status === 5 || user.status == 6" @click="recurOrder">再来一单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: '',
				show: false
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getUser()
		},
		methods: {
			async getUser() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/user_order_info',
						data: {
							play_order_id: this.id
						}
					})
					this.user = result.data.data
					this.show = true
				} catch (e) {}
			},
			// 取消订单
			async cancelOrder(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/cancel',
						data: {
							play_order_id: this.id
						}
					})
					this.taskSy()
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 去付款
			async pay(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/pay',
						data: {
							play_order_id: this.id
						}
					})
					this.taskSy()
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			async success(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/user_finish_order',
						data: {
							play_order_id: this.id
						}
					})
					this.taskSy()
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 再来一单
			async recurOrder(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/once',
						data: {
							play_order_id: this.id
						}
					})
					this.taskSy()
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			taskSy() {
				this.msg('操作成功')
				uni.$emit('updateMyOrder')
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 800)
			},
			copy() {
				uni.setClipboardData({
					data: this.user.order_sn,
					success: () => {
						this.msg('复制成功')
					}
				});
			},
			goEvaluate() {
				uni.navigateTo({
					url: '/playcenterPage/evaluate?id=' + this.id
				})
			},
			sendmsg() {
				if (this.user.to_user_id == this.user.user_id) {
					this.msg('自己不能撩自己')
					return
				}
				this.navigateToFn({
					url: '/minePages/chat/talk?toid=' + this.user.to_user_id + '&toname=' + this.user.nickname,
					checkLogin: true
				})

			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.top {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;

			.user {
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.user-left {
					align-items: center;

					image {
						width: 72rpx;
						height: 72rpx;
						border-radius: 10rpx;
					}

					.t1 {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						margin-left: 16rpx;
					}
				}

				.user-right {
					font-size: 14px;
					font-weight: 400;
					color: #ffffff;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					padding: 5px 15px;
					border-radius: 15px;
				}
			}

			.tag-list {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.price {
				margin-top: 32rpx;
				font-weight: bold;

				.p1 {
					font-size: 32rpx;
					color: #333333;
				}

				.p2 {
					color: #f5483e;

					.num {
						font-size: 32rpx;
					}

					.unit {
						font-size: 26rpx;
					}
				}
			}
		}

		.bottom {
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 24rpx;

			.list {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;

				.t1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.copy-btn {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.foot {
			width: 100%;
			height: 88rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;

			view {
				margin-left: 24rpx;
			}

			.btn1 {
				width: 160rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0);
				border-radius: 40rpx;
				border: 1px solid #9D5EF4;
				font-size: 28rpx;
				font-weight: 400;
				color: #9D5EF4;
				text-align: center;
				line-height: 64rpx;
			}

			.btn2 {
				width: 160rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
				// margin-left: 24rpx;
				// margin-right: 30rpx;
			}
		}
	}
</style>